<template>
    <div class="public-notice">
        <div class="notice-body">
            <div class="notice-head">
                <h3>发布新通知</h3>
                <div class="head-right">
                    <!-- <span class="right-user">发件人:{{ userName }}</span> -->
                    <el-button type="primary" round class="save-btn">发布</el-button>
                </div>
            </div>
            <div class="notice-concent">
                <el-input v-model="input1" style="max-width: 600px" placeholder="选择收件人">
                    <template #prepend>收件人：</template>
                    <template #append> <i class="iconfont icon-tianjia1"></i> </template>

                </el-input>

            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';

const noticeData = ref({
    noticeType: '普通通知'
})
const type = reactive([
    {
        label: "普通通知",
        value: 0,
    },
    {
        label: "考试通知",
        value: 1,
    },
])
const userName = computed(() => sessionStorage.getItem('userName'))

</script>

<style lang="less" scoped>
.public-notice {
    width: 100vw;
    height: 87.9vh;
    padding-top: 25px;
    background-color: #efeff0;

    .notice-body {
        margin: auto;
        width: 70vw;
        height: 85.7vh;
        background-color: #fff;
        border-radius: 15px;
        padding: 0px 20px;

        .notice-head {
            text-align: center;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #efeff0;

            .head-right {
                margin: 15px 0;
                color: grey;

                .right-user {
                    margin: 12px;
                    font-size: 15px;
                }

                .save-btn {
                    font-size: 15px;
                    padding: 18px;
                    width: 100px;
                    margin-left: 20px;
                }
            }
        }

    }
}
</style>